import {
  defineComponent,
  ref,
  onMounted,
  resolveDirective,
  withDirectives,
  openBlock,
  createElementBlock,
  unref
} from "vue";
import {
  c as createTextStyle$1,
  S as SeriesModel,
  C as ChartView,
  a as use,
  i as install,
  b as install$1,
  d as installLabelLayout,
  e as createDimensions,
  f as SeriesData,
  g as extendShape,
  h as initProps,
  j as updateProps,
  G as Group,
  k as enableHoverEmphasis,
  R as Rect,
  Z as ZRText,
  l as CompoundPath,
  p as parsePercent$1,
  m as makePath,
  n as createSymbol,
  o as Circle,
  B as BoundingRect,
  u as useEchart
} from "./hooks-aBG276Pf.js";
import { j as useData, b as useProp } from "./index-CEDaTd93.js";
function createTextStyle(textStyleModel, opts) {
  opts = opts || {};
  return createTextStyle$1(textStyleModel, null, null, opts.state !== "normal");
}
function extendSeriesModel(proto) {
  var Model = SeriesModel.extend(proto);
  SeriesModel.registerClass(Model);
  return Model;
}
function extendChartView(proto) {
  var View = ChartView.extend(proto);
  ChartView.registerClass(View);
  return View;
}
use([install, install$1]);
use(installLabelLayout);
extendSeriesModel({
  type: "series.liquidFill",
  optionUpdated: function () {
    var option = this.option;
    option.gridSize = Math.max(Math.floor(option.gridSize), 4);
  },
  getInitialData: function (option, ecModel) {
    var dimensions = createDimensions(option.data, {
      coordDimensions: ["value"]
    });
    var list = new SeriesData(dimensions, this);
    list.initData(option.data);
    return list;
  },
  defaultOption: {
    color: ["#294D99", "#156ACF", "#1598ED", "#45BDFF"],
    center: ["50%", "50%"],
    radius: "50%",
    amplitude: "8%",
    waveLength: "80%",
    phase: "auto",
    period: "auto",
    direction: "right",
    shape: "circle",
    waveAnimation: true,
    animationEasing: "linear",
    animationEasingUpdate: "linear",
    animationDuration: 2e3,
    animationDurationUpdate: 1e3,
    outline: {
      show: true,
      borderDistance: 8,
      itemStyle: {
        color: "none",
        borderColor: "#294D99",
        borderWidth: 8,
        shadowBlur: 20,
        shadowColor: "rgba(0, 0, 0, 0.25)"
      }
    },
    backgroundStyle: {
      color: "#E3F7FF"
    },
    itemStyle: {
      opacity: 0.95,
      shadowBlur: 50,
      shadowColor: "rgba(0, 0, 0, 0.4)"
    },
    label: {
      show: true,
      color: "#294D99",
      insideColor: "#fff",
      fontSize: 50,
      fontWeight: "bold",
      align: "center",
      baseline: "middle",
      position: "inside"
    },
    emphasis: {
      itemStyle: {
        opacity: 0.8
      }
    }
  }
});
const LiquidShape = extendShape({
  type: "ec-liquid-fill",
  shape: {
    waveLength: 0,
    radius: 0,
    radiusY: 0,
    cx: 0,
    cy: 0,
    waterLevel: 0,
    amplitude: 0,
    phase: 0,
    inverse: false
  },
  buildPath: function (ctx, shape) {
    if (shape.radiusY == null) {
      shape.radiusY = shape.radius;
    }
    var curves = Math.max(
      Math.ceil(((2 * shape.radius) / shape.waveLength) * 4) * 2,
      8
    );
    while (shape.phase < -Math.PI * 2) {
      shape.phase += Math.PI * 2;
    }
    while (shape.phase > 0) {
      shape.phase -= Math.PI * 2;
    }
    var phase = (shape.phase / Math.PI / 2) * shape.waveLength;
    var left = shape.cx - shape.radius + phase - shape.radius * 2;
    ctx.moveTo(left, shape.waterLevel);
    var waveRight = 0;
    for (var c = 0; c < curves; ++c) {
      var stage = c % 4;
      var pos = getWaterPositions(
        (c * shape.waveLength) / 4,
        stage,
        shape.waveLength,
        shape.amplitude
      );
      ctx.bezierCurveTo(
        pos[0][0] + left,
        -pos[0][1] + shape.waterLevel,
        pos[1][0] + left,
        -pos[1][1] + shape.waterLevel,
        pos[2][0] + left,
        -pos[2][1] + shape.waterLevel
      );
      if (c === curves - 1) {
        waveRight = pos[2][0];
      }
    }
    if (shape.inverse) {
      ctx.lineTo(waveRight + left, shape.cy - shape.radiusY);
      ctx.lineTo(left, shape.cy - shape.radiusY);
      ctx.lineTo(left, shape.waterLevel);
    } else {
      ctx.lineTo(waveRight + left, shape.cy + shape.radiusY);
      ctx.lineTo(left, shape.cy + shape.radiusY);
      ctx.lineTo(left, shape.waterLevel);
    }
    ctx.closePath();
  }
});
function getWaterPositions(x, stage, waveLength, amplitude) {
  if (stage === 0) {
    return [
      [x + ((1 / 2) * waveLength) / Math.PI / 2, amplitude / 2],
      [x + ((1 / 2) * waveLength) / Math.PI, amplitude],
      [x + waveLength / 4, amplitude]
    ];
  } else if (stage === 1) {
    return [
      [x + (((1 / 2) * waveLength) / Math.PI / 2) * (Math.PI - 2), amplitude],
      [
        x + (((1 / 2) * waveLength) / Math.PI / 2) * (Math.PI - 1),
        amplitude / 2
      ],
      [x + waveLength / 4, 0]
    ];
  } else if (stage === 2) {
    return [
      [x + ((1 / 2) * waveLength) / Math.PI / 2, -amplitude / 2],
      [x + ((1 / 2) * waveLength) / Math.PI, -amplitude],
      [x + waveLength / 4, -amplitude]
    ];
  } else {
    return [
      [x + (((1 / 2) * waveLength) / Math.PI / 2) * (Math.PI - 2), -amplitude],
      [
        x + (((1 / 2) * waveLength) / Math.PI / 2) * (Math.PI - 1),
        -amplitude / 2
      ],
      [x + waveLength / 4, 0]
    ];
  }
}
var parsePercent = parsePercent$1;
function isPathSymbol(symbol) {
  return symbol && symbol.indexOf("path://") === 0;
}
extendChartView({
  type: "liquidFill",
  render: function (seriesModel, ecModel, api) {
    var self = this;
    var group = this.group;
    group.removeAll();
    var data = seriesModel.getData();
    var itemModel = data.getItemModel(0);
    var center = itemModel.get("center");
    var radius = itemModel.get("radius");
    var width = api.getWidth();
    var height = api.getHeight();
    var size = Math.min(width, height);
    var outlineDistance = 0;
    var outlineBorderWidth = 0;
    var showOutline = seriesModel.get("outline.show");
    if (showOutline) {
      outlineDistance = seriesModel.get("outline.borderDistance");
      outlineBorderWidth = parsePercent(
        seriesModel.get("outline.itemStyle.borderWidth"),
        size
      );
    }
    var cx = parsePercent(center[0], width);
    var cy = parsePercent(center[1], height);
    var outterRadius;
    var innerRadius;
    var paddingRadius;
    var isFillContainer = false;
    var symbol = seriesModel.get("shape");
    if (symbol === "container") {
      isFillContainer = true;
      outterRadius = [width / 2, height / 2];
      innerRadius = [
        outterRadius[0] - outlineBorderWidth / 2,
        outterRadius[1] - outlineBorderWidth / 2
      ];
      paddingRadius = [
        parsePercent(outlineDistance, width),
        parsePercent(outlineDistance, height)
      ];
      radius = [
        Math.max(innerRadius[0] - paddingRadius[0], 0),
        Math.max(innerRadius[1] - paddingRadius[1], 0)
      ];
    } else {
      outterRadius = parsePercent(radius, size) / 2;
      innerRadius = outterRadius - outlineBorderWidth / 2;
      paddingRadius = parsePercent(outlineDistance, size);
      radius = Math.max(innerRadius - paddingRadius, 0);
    }
    if (showOutline) {
      var outline = getOutline();
      outline.style.lineWidth = outlineBorderWidth;
      group.add(getOutline());
    }
    var left = isFillContainer ? 0 : cx - radius;
    var top = isFillContainer ? 0 : cy - radius;
    var wavePath = null;
    group.add(getBackground());
    var oldData = this._data;
    var waves = [];
    data
      .diff(oldData)
      .add(function (idx) {
        var wave = getWave(idx, false);
        var waterLevel = wave.shape.waterLevel;
        wave.shape.waterLevel = isFillContainer ? height / 2 : radius;
        initProps(
          wave,
          {
            shape: {
              waterLevel
            }
          },
          seriesModel
        );
        wave.z2 = 2;
        setWaveAnimation(idx, wave, null);
        group.add(wave);
        data.setItemGraphicEl(idx, wave);
        waves.push(wave);
      })
      .update(function (newIdx, oldIdx) {
        var waveElement = oldData.getItemGraphicEl(oldIdx);
        var newWave = getWave(newIdx, false, waveElement);
        var shape = {};
        var shapeAttrs = [
          "amplitude",
          "cx",
          "cy",
          "phase",
          "radius",
          "radiusY",
          "waterLevel",
          "waveLength"
        ];
        for (var i = 0; i < shapeAttrs.length; ++i) {
          var attr = shapeAttrs[i];
          if (newWave.shape.hasOwnProperty(attr)) {
            shape[attr] = newWave.shape[attr];
          }
        }
        var style = {};
        var styleAttrs = ["fill", "opacity", "shadowBlur", "shadowColor"];
        for (var i = 0; i < styleAttrs.length; ++i) {
          var attr = styleAttrs[i];
          if (newWave.style.hasOwnProperty(attr)) {
            style[attr] = newWave.style[attr];
          }
        }
        if (isFillContainer) {
          shape.radiusY = height / 2;
        }
        updateProps(
          waveElement,
          {
            shape,
            x: newWave.x,
            y: newWave.y
          },
          seriesModel
        );
        if (
          seriesModel.isUniversalTransitionEnabled &&
          seriesModel.isUniversalTransitionEnabled()
        ) {
          updateProps(
            waveElement,
            {
              style
            },
            seriesModel
          );
        } else {
          waveElement.useStyle(style);
        }
        var oldWaveClipPath = waveElement.getClipPath();
        var newWaveClipPath = newWave.getClipPath();
        waveElement.setClipPath(newWave.getClipPath());
        waveElement.shape.inverse = newWave.inverse;
        if (
          oldWaveClipPath &&
          newWaveClipPath &&
          self._shape === symbol &&
          !isPathSymbol(symbol)
        ) {
          updateProps(
            newWaveClipPath,
            {
              shape: oldWaveClipPath.shape
            },
            seriesModel,
            { isFrom: true }
          );
        }
        setWaveAnimation(newIdx, waveElement, waveElement);
        group.add(waveElement);
        data.setItemGraphicEl(newIdx, waveElement);
        waves.push(waveElement);
      })
      .remove(function (idx) {
        var wave = oldData.getItemGraphicEl(idx);
        group.remove(wave);
      })
      .execute();
    if (itemModel.get("label.show")) {
      group.add(getText(waves));
    }
    this._shape = symbol;
    this._data = data;
    function getPath(r, isForClipping) {
      if (symbol) {
        if (isPathSymbol(symbol)) {
          var path = makePath(symbol.slice(7), {});
          var bouding = path.getBoundingRect();
          var w = bouding.width;
          var h = bouding.height;
          if (w > h) {
            h = ((r * 2) / w) * h;
            w = r * 2;
          } else {
            w = ((r * 2) / h) * w;
            h = r * 2;
          }
          var left2 = isForClipping ? 0 : cx - w / 2;
          var top2 = isForClipping ? 0 : cy - h / 2;
          path = makePath(
            symbol.slice(7),
            {},
            new BoundingRect(left2, top2, w, h)
          );
          if (isForClipping) {
            path.x = -w / 2;
            path.y = -h / 2;
          }
          return path;
        } else if (isFillContainer) {
          var x = isForClipping ? -r[0] : cx - r[0];
          var y = isForClipping ? -r[1] : cy - r[1];
          return createSymbol("rect", x, y, r[0] * 2, r[1] * 2);
        } else {
          var x = isForClipping ? -r : cx - r;
          var y = isForClipping ? -r : cy - r;
          if (symbol === "pin") {
            y += r;
          } else if (symbol === "arrow") {
            y -= r;
          }
          return createSymbol(symbol, x, y, r * 2, r * 2);
        }
      }
      return new Circle({
        shape: {
          cx: isForClipping ? 0 : cx,
          cy: isForClipping ? 0 : cy,
          r
        }
      });
    }
    function getOutline() {
      var outlinePath = getPath(outterRadius);
      outlinePath.style.fill = null;
      outlinePath.setStyle(
        seriesModel.getModel("outline.itemStyle").getItemStyle()
      );
      return outlinePath;
    }
    function getBackground() {
      var strokePath = getPath(radius);
      strokePath.setStyle(
        seriesModel.getModel("backgroundStyle").getItemStyle()
      );
      strokePath.style.fill = null;
      strokePath.z2 = 5;
      var fillPath = getPath(radius);
      fillPath.setStyle(seriesModel.getModel("backgroundStyle").getItemStyle());
      fillPath.style.stroke = null;
      var group2 = new Group();
      group2.add(strokePath);
      group2.add(fillPath);
      return group2;
    }
    function getWave(idx, isInverse, oldWave) {
      var radiusX = isFillContainer ? radius[0] : radius;
      var radiusY = isFillContainer ? height / 2 : radius;
      var itemModel2 = data.getItemModel(idx);
      var itemStyleModel = itemModel2.getModel("itemStyle");
      var phase = itemModel2.get("phase");
      var amplitude = parsePercent(itemModel2.get("amplitude"), radiusY * 2);
      var waveLength = parsePercent(itemModel2.get("waveLength"), radiusX * 2);
      var value = data.get("value", idx);
      var waterLevel = radiusY - value * radiusY * 2;
      phase = oldWave
        ? oldWave.shape.phase
        : phase === "auto"
        ? (idx * Math.PI) / 4
        : phase;
      var normalStyle = itemStyleModel.getItemStyle();
      if (!normalStyle.fill) {
        var seriesColor = seriesModel.get("color");
        var id = idx % seriesColor.length;
        normalStyle.fill = seriesColor[id];
      }
      var x = radiusX * 2;
      var wave = new LiquidShape({
        shape: {
          waveLength,
          radius: radiusX,
          radiusY,
          cx: x,
          cy: 0,
          waterLevel,
          amplitude,
          phase,
          inverse: isInverse
        },
        style: normalStyle,
        x: cx,
        y: cy
      });
      wave.shape._waterLevel = waterLevel;
      var hoverStyle = itemModel2.getModel("emphasis.itemStyle").getItemStyle();
      hoverStyle.lineWidth = 0;
      wave.ensureState("emphasis").style = hoverStyle;
      enableHoverEmphasis(wave);
      var clip = getPath(radius, true);
      clip.setStyle({
        fill: "white"
      });
      wave.setClipPath(clip);
      return wave;
    }
    function setWaveAnimation(idx, wave, oldWave) {
      var itemModel2 = data.getItemModel(idx);
      var maxSpeed = itemModel2.get("period");
      var direction = itemModel2.get("direction");
      var value = data.get("value", idx);
      var phase = itemModel2.get("phase");
      phase = oldWave
        ? oldWave.shape.phase
        : phase === "auto"
        ? (idx * Math.PI) / 4
        : phase;
      var defaultSpeed = function (maxSpeed2) {
        var cnt = data.count();
        return cnt === 0
          ? maxSpeed2
          : maxSpeed2 * (0.2 + ((cnt - idx) / cnt) * 0.8);
      };
      var speed = 0;
      if (maxSpeed === "auto") {
        speed = defaultSpeed(5e3);
      } else {
        speed =
          typeof maxSpeed === "function" ? maxSpeed(value, idx) : maxSpeed;
      }
      var phaseOffset = 0;
      if (direction === "right" || direction == null) {
        phaseOffset = Math.PI;
      } else if (direction === "left") {
        phaseOffset = -Math.PI;
      } else if (direction === "none") {
        phaseOffset = 0;
      } else {
        console.error("Illegal direction value for liquid fill.");
      }
      if (direction !== "none" && itemModel2.get("waveAnimation")) {
        wave
          .animate("shape", true)
          .when(0, {
            phase
          })
          .when(speed / 2, {
            phase: phaseOffset + phase
          })
          .when(speed, {
            phase: phaseOffset * 2 + phase
          })
          .during(function () {
            if (wavePath) {
              wavePath.dirty(true);
            }
          })
          .start();
      }
    }
    function getText(waves2) {
      var labelModel = itemModel.getModel("label");
      function formatLabel() {
        var formatted = seriesModel.getFormattedLabel(0, "normal");
        var defaultVal = data.get("value", 0) * 100;
        var defaultLabel = data.getName(0) || seriesModel.name;
        if (!isNaN(defaultVal)) {
          defaultLabel = defaultVal.toFixed(0) + "%";
        }
        return formatted == null ? defaultLabel : formatted;
      }
      var textRectOption = {
        z2: 10,
        shape: {
          x: left,
          y: top,
          width: (isFillContainer ? radius[0] : radius) * 2,
          height: (isFillContainer ? radius[1] : radius) * 2
        },
        style: {
          fill: "transparent"
        },
        textConfig: {
          position: labelModel.get("position") || "inside"
        },
        silent: true
      };
      var textOption = {
        style: {
          text: formatLabel(),
          textAlign: labelModel.get("align"),
          textVerticalAlign: labelModel.get("baseline")
        }
      };
      Object.assign(textOption.style, createTextStyle(labelModel));
      var outsideTextRect = new Rect(textRectOption);
      var insideTextRect = new Rect(textRectOption);
      insideTextRect.disableLabelAnimation = true;
      outsideTextRect.disableLabelAnimation = true;
      var outsideText = new ZRText(textOption);
      var insideText = new ZRText(textOption);
      outsideTextRect.setTextContent(outsideText);
      insideTextRect.setTextContent(insideText);
      var insColor = labelModel.get("insideColor");
      insideText.style.fill = insColor;
      var group2 = new Group();
      group2.add(outsideTextRect);
      group2.add(insideTextRect);
      var boundingCircle = getPath(radius, true);
      wavePath = new CompoundPath({
        shape: {
          paths: waves2
        },
        x: cx,
        y: cy
      });
      wavePath.setClipPath(boundingCircle);
      insideTextRect.setClipPath(wavePath);
      return group2;
    }
  },
  dispose: function () {}
});
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "WaveChart",
  props: {
    component: {}
  },
  setup(__props) {
    const props = __props;
    const chartEl = ref(null);
    const { updateEchart, resizeHandler } = useEchart(chartEl);
    const chartData = ref(0);
    const dataChange = (resp, _) => {
      if (resp.status === "SUCCESS") {
        var keys = Object.keys(resp.afterData);
        chartData.value = resp.afterData[keys[0]];
      }
      updateEchart(getOption());
    };
    useData(props.component, dataChange);
    const { propValue } = useProp(props.component, async () => {
      updateEchart(getOption());
    });
    const getOption = () => {
      const option = {
        series: [
          {
            type: "liquidFill",
            amplitude: propValue.options.amplitude,
            data: [chartData.value],
            outline: {
              show: propValue.options.outlineShow,
              itemStyle: {
                borderColor: propValue.options.outlineColor
              }
            },
            shape: propValue.options.shape,
            radius: propValue.options.radius,
            direction: propValue.options.direction,
            waveAnimation: propValue.options.waveAnimation,
            label: {
              show: propValue.options.labelShow,
              fontSize: propValue.options.fontSize
            },
            backgroundStyle: {
              color: propValue.options.backgroundColor
            },
            color: [propValue.options.color]
          }
        ]
      };
      return option;
    };
    onMounted(async () => {
      updateEchart(getOption());
    });
    return (_ctx, _cache) => {
      const _directive_resize = resolveDirective("resize");
      return withDirectives(
        (openBlock(),
        createElementBlock(
          "div",
          {
            ref_key: "chartEl",
            ref: chartEl
          },
          null,
          512
        )),
        [[_directive_resize, unref(resizeHandler)]]
      );
    };
  }
});
export { _sfc_main as default };
